<!--
* 功能-页面实现
* Date: 2023-7-25
* Author: 徐富强
 -->
<template>
  <div class="container">
      <div class="card-content">
        <RadioButtonGroup :changeValue='radioValue' :radioOptions='isButtonOptions' @change="radioChange"></RadioButtonGroup>
      </div>
    </div>
  <layout-card v-model='search' :filters='isExampleOptions' headline='信息列表' headtitle='数据筛选' :hasButton="true"
  @search-change='searchChange' @search-reset='searchReset'>
    <template #action>
      <el-button type='primary' @click='handleExport' :disabled="isDisabled">导出</el-button>
    </template>
    <table-common :columns='exampleColumns' :loading='loading' :pagination='pager' :table-data='tableData' size='large'
      @current-change='currentChange' @size-change='sizeChange' @sort-change='sortChange' stripe>
    </table-common>
  </layout-card>
</template>

<script lang='ts' setup>
import { ref, onBeforeMount, reactive } from 'vue'
import LayoutCard from '@/components/LayoutCard/index.vue'
import TableCommon from '@/components/TableCommon/index.vue'
import RadioButtonGroup from '@/components/RadioButtonGroup/index.vue'
import { exampleColumns } from '@/views/keynoteResource/service/config/columns'
import { exampleOptions } from '@/views/keynoteResource/service/config/filters'
import { resourceExport, PageListType, problemPageList } from '@/api/keynote/service'
import { getResource } from '@/api/resource'
import { dayjs } from 'element-plus'
const isExampleOptions = ref(exampleOptions)
const isButtonOptions = ref([])
/**
 * 功能-获取航站楼,数据筛选类型
 * Date: 2023-7-26
 * Author: 骆成洋
 */
const getFormData = async () => {
  const res1 = await getResource('keynote_resource_service')
  const res2 = await getResource('terminal')
  isButtonOptions.value = res1.data.properties.meta
  isExampleOptions.value[1].inputProps.options = res2.data.properties.meta.reverse()
}

interface SearchType {
  terminal: string
  serviceName: string
  isDisable: string
  serviceType: string
  order:string[]
}
const isDisabled = ref(true)
const loading = ref(false)
const tableData = ref([])
const radioValue = ref()
// 分页数据
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  pageCount: 1,
  condition: {}
})
const search = ref<SearchType>({})
const radioChange = function (value:any) {
  radioValue.value = value
}
/**
 * 功能-获取数据、分页查询
 * Date: 2023-7-26
 * Author: 骆成洋、范豪
 */
const getData = async () => {
  loading.value = true
  const payload: PageListType = {
    pageNum: pager.currentPage,
    pageSize: pager.pageSize,
    condition: {}
  }
  // 查询条件
  // 排序
  if (search.value.order) {
    payload.condition.order = search.value.order || ''
  }
  // 服务
  if (radioValue.value) {
    payload.condition.serviceType = radioValue.value || ''
  }
  // 名称
  if (search.value.serviceName) {
    payload.condition.serviceName = search.value.serviceName || ''
  }
  // 航站楼
  if (search.value.terminal) {
    payload.condition.terminal = search.value.terminal || ''
  }

  // 服务类型
  if (search.value.isDisable) {
    payload.condition.isDisable = search.value.isDisable || ''
  }
  // 分页信息列表
  const res = await problemPageList(payload)
  // 转换
  res.data.list.map((item:any) => {
    if (item.isDisable === 'N') {
      item.isDisable = '开启'
    } else {
      item.isDisable = '关闭'
    }
  })
  if (res.data.list.length === 0) {
    isDisabled.value = true
  } else {
    isDisabled.value = false
  }
  loading.value = false
  tableData.value = res.data.list
  pager.total = res.data.total
  pager.pageCount = pager.total===0? 1:Math.ceil(pager.total / pager.pageSize)
}
/**
 * 分页
 */
const sizeChange = (size: number) => {
  pager.pageSize = size
  getData()
}
/**
 * 每页条数改变时触发
 */
const currentChange = (value: number) => {
  pager.currentPage = value
  getData()
}
/**
 * 点击查询
 * @param data 数据
 */
const searchChange = (data: FilterDataType) => {
  pager.currentPage = 1
  search.value = data
  getData()
}

/**
 * 功能-点击排序
 * Date: 2023-7-26
 * Author: 骆成洋、侯强
 * @param value 排序规则
 */
const sortChange = (value) => {
  const sort = value.order?.slice(0, -6) || 'asc'
  let order = []
  if (value.prop === 'serviceCode') {
    order = [{ column: 'service_code', method: sort }]
  } else if (value.prop === 'isDisable') {
    order = [{ column: 'is_disable', method: sort }]
  } else if (value.prop === 'createTime') {
    order = [{ column: 'create_time', method: sort }]
  }
  search.value.order = order
  getData()
}

/**
 * 点击重置
 * @param data 数据
 */
const searchReset = (data: FilterDataType) => {
  search.value = data
  pager.currentPage = 1
  pager.pageSize = 10
  radioValue.value = ''
  getData()
}

/**
 * 功能-点击导出方法
 * Date: 2023-7-26
 * Author: 侯强
 */
const handleExport = () => {
  const payload: PageListType = {}
  if (search.value.order) {
    payload.order = search.value.order || ''
  }
  if (radioValue.value) {
    payload.serviceType = radioValue.value || ''
  }
  // 名称
  if (search.value.serviceName) {
    payload.serviceName = search.value.serviceName || ''
  }
  // 航站楼
  if (search.value.terminal) {
    payload.terminal = search.value.terminal || ''
  }

  // 服务类型
  if (search.value.isDisable) {
    payload.isDisable = search.value.isDisable || ''
  }

  resourceExport(payload)
    .then((res) => {
      const link = document.createElement('a')
      const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      link.setAttribute(
        'download',
        `服务资源信息采集${dayjs().format('YYYYMMDD')}.xlsx`
      )
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    })
    .catch((err: any) => {
      ElMessage.error(err?.message || '导出失败')
    })
}

onBeforeMount(getData)
onBeforeMount(getFormData)
</script>
<style>
.container {
  background: #f5f7f9;
  min-height: auto;
  overflow: hidden;
}
.container .card-content {
  padding: 10px;
  margin: 0;
  background: #FFF;
  border-radius: 8px;
}
</style>
